<template>
    <!-- 选择框组件 -->
    <div class="pane-group">
        <card-pane>
            <template v-slot:title>
                <span class="label">
                    <svg-icon
                        icon-class="font-layout-2-fill"
                        class="font-layout-2-fill"
                    />
                    <span class="text">选择器组件</span>
                </span>
            </template>
            <template v-slot:list>
                <draggable
                    class="list-group"
                    :list="inputList"
                    :group="inputDraggable"
                    :sort="false"
                    :clone="hadnelCloneInput"
                >
                    <transition-group>
                        <div
                            class="component-item"
                            :class="inputDraggable.disabled ? 'disabled' : ''"
                            v-for="item in inputList"
                            :key="item.name"
                        >
                            <svg-icon
                                :icon-class="item.icon"
                                :class="item.icon"
                            />
                            <span class="label">
                                {{ item.name }}
                            </span>
                        </div>
                    </transition-group>
                </draggable>
            </template>
        </card-pane>
    </div>
</template>
<script>
import { getUuid } from '@/utils/tool'
import CardPane from '../base/components/cardPane'
export default {
    components: {
        CardPane
    },
    data() {
        return {
            // 选中的行
            activeRow: {},
            inputList: [
                {
                    type: 'checkbox',
                    name: '单项复选框',
                    icon: 'font-wubi-input',
                    value: {
                        ltype: 'checkbox',
                        type: 'single',
                        prop: '',
                        style: 'default',
                        label: '',
                        width: 'w-1',
                        labelKey: 'label',
                        valueKey: 'value',
                        border: false,
                        options: [
                            {
                                disabled: false,
                                label: '选项一',
                                value: 1
                            }
                        ]
                    },
                    rule: {
                        required: false,
                        message: ''
                    }
                },
                {
                    type: 'checkbox',
                    name: '复选框组',
                    icon: 'font-wubi-input',
                    value: {
                        ltype: 'checkbox',
                        type: 'group',
                        prop: '',
                        propType: [],
                        style: 'default',
                        label: '',
                        width: 'w-1',
                        labelKey: 'label',
                        valueKey: 'value',
                        border: false,
                        min: 0,
                        max: 0,
                        options: [
                            {
                                disabled: false,
                                label: '选项一',
                                value: 1
                            },
                            {
                                disabled: false,
                                label: '选项二',
                                value: 2
                            }
                        ]
                    },
                    rule: {
                        required: false,
                        message: ''
                    }
                },
                {
                    type: 'checkbox',
                    name: '单选组',
                    icon: 'font-wubi-input',
                    value: {
                        ltype: 'radio',
                        prop: '',
                        style: 'default',
                        label: '',
                        width: 'w-1',
                        border: false,
                        options: [
                            {
                                disabled: false,
                                label: '选项一',
                                value: 1
                            },
                            {
                                disabled: false,
                                label: '选项二',
                                value: 2
                            }
                        ]
                    }
                },
                {
                    type: 'checkbox',
                    name: '开关',
                    icon: 'font-wubi-input',
                    value: {
                        ltype: 'switch',
                        prop: '',
                        disabled: false,
                        label: '',
                        activeText: '',
                        inactiveText: '',
                        activeValue: true,
                        inactiveValue: false,
                        activeColor: '',
                        inactiveColor: ''
                    }
                }
            ],
            // 表单拖拽配置项
            inputDraggable: {
                name: 'formComponent',
                pull: false,
                put: false,
                disabled: true
            }
        }
    },
    mounted() {
        this.$bus.$on('ActiveView', row => {
            this.activeRow = row
            if (JSON.stringify(this.activeRow) !== '{}') {
                this.inputDraggable.pull = 'clone'
                this.inputDraggable.disabled = false
            } else {
                this.inputDraggable.pull = false
                this.inputDraggable.disabled = true
            }
        })
    },
    methods: {
        /**
         * 克隆表单容器开始
         */
        hadnelCloneInput(origin) {
            const data = JSON.parse(JSON.stringify(origin))
            data.id = getUuid()
            data.key = getUuid()
            data.pid = this.activeRow.id
            data.value.label = getUuid(4)
            data.value.prop = getUuid(4)
            return data
        }
    }
}
</script>
<style lang="scss" scoped>
@import './styles/base';
</style>
